<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@taglib uri="/struts-jquery-grid-tags" prefix="sjg"%>
<%@taglib uri="/struts-json-tags" prefix="json"%>
<html>
<head>
<sj:head jqueryui="true" jquerytheme="redmond" />
<style type="text/css">
.row-highlight {
	background-color: Yellow;
}
</style>
<script type="text/javascript">
	$(function() {
		var tr = $('#gridView').find('tr');
		tr.bind('click', function(event) {
			var values = '';
			tr.removeClass('row-highlight');
			var tds = $(this).addClass('row-highlight').find('td');

			$.each(tds, function(index, item) {
				values = values + ',' + item.innerHTML;						
			});
			alert(values);

		});
	});
	
	$(document).ready(function()
			{			 
			  $("table#gridView tr:even").css("background-color", "black");
			  $("table#gridView tr:odd").css("background-color", "#EFF1F1");
			  $("table#gridView th").css("background-color", "green");
			  $("table#gridView th").css("color", "white");
			});
</script>
</head>
<body>
	<s:form action="testAction">
		First Name: <s:property value="firstName" />
		<s:textfield name="surName" label="User Name"></s:textfield>
		<sj:submit button="true" value="Show" />
	</s:form>
	<table id="gridView">
		<tr bgcolor="green"  id="header">
			<th>Contact Name</th>
			<th>Mobile Phone</th>
			<th>Email</th>
			<th>Contact Type</th>
		</tr>
		<s:iterator value="contacts">
			<tr>
				<td><s:property value="contactName" /></td>
				<td><s:property value="mobilePhone" /></td>
				<td><s:property value="email" /></td>
				<td><s:property value="contactType" /></td>
			</tr>
		</s:iterator>
	</table>
</body>
</html>